<template>
  <div class="console">
    <n-card :bordered="false" class="proCard" style="margin-top: 10px">
      <template #header>
        <n-grid :cos="12" :x-gap="12">
          <n-gi :span="2">
           <n-select :options="sizeOptions" default-value="10条" @update:value="updateSize"/>
          </n-gi>
        </n-grid>
      </template>
      <n-grid :cos="2" :x-gap="24">
        <n-gi :span="12">
          <RankDataChart :dataSource="visits.playerRecharge" chartName="玩家充值排行" />
        </n-gi>
        <n-gi :span="12">
          <RankDataChart :dataSource="visits.chanRecharge" chartName="渠道充值排名"/>
        </n-gi>
      </n-grid>
    </n-card>
  </div>
</template>
<script lang="ts" setup>
  import {ref, onMounted, unref, reactive} from 'vue';
  import RankDataChart from "./rankChart.vue"
  import {getRankData} from "@/api/data/rankData";

  const visits = ref<any>({});
  const params = reactive({
    pageSize: 10
  });

  const sizeOptions = [
    {label: "10条", value: 10},
    {label: "30条", value: 30},
    {label: "50条", value: 50},
    {label: "100条", value: 100}
  ];

  onMounted(async () => {
    visits.value = await getRankData(params);
  });

  async function updateSize(value) {
    Object.assign(params, {pageSize: value});
    visits.value = await getRankData(params);
  }
</script>

<style lang="less" scoped></style>
